<!-- 备份 -->
<template>
    <div class="jm-bg-color content" ref="zoomBoxRef">
      <div class="left">
        <img src="../../../../../assets/icon/fangda.png" />
        <img src="../../../../../assets/icon/suoxiao.png" />
        <img src="../../../../../assets/icon/fuwei.png" />
        <img src="../../../../../assets/icon/shangyibu.png" />
        <img src="../../../../../assets/icon/xiayibu.png" />
        <img src="../../../../../assets/icon/huifumoren.png" />
      </div>
      <div class="right">
        <img src="../../../../../assets/icon/sousuo.png" />
        <img src="../../../../../assets/icon/shaixuan.png" @click="show" />
        <MyForm class="myForm" v-if="isShow"></MyForm>
      </div>
      <svg ref="chartContainer" width="100%" height="100%"></svg>
    </div>
  </template>
  
  <script setup lang="ts">
  import { onMounted, ref, reactive, computed } from 'vue'
  import type { AxiosResponse } from 'axios'
  import { HttpCodeEnum } from '@packages/share/enums'
  // @ts-ignore
  import MyForm from './myform.vue'
  // @ts-ignore
  import * as d3 from 'd3'
  import {
    getManualMeterAPI,
    getManualCountAPI,
    getManualOneAPI,
    getManualMeterTwoAPI
  } from '@/api/manual/index'
  import { assignObject } from '@/utils/object'
  // 节点图标
  import nullBox from '@/assets/icon/null.png'
  import Ip from '@/assets/icon/bin_ip.png'
  import china from '@/assets/images/china.png'
  import ipPort from '@/assets/icon/ip_port.png'
  import ipCertificate from '@/assets/icon/bin_ip_certificate.png'
  import webIcon from '@/assets/icon/web_icon.png'
  import htmlIcon from '@/assets/icon/icon_hash.png'
  import domain from '@/assets/icon/domain.png'
  import ipv4 from '@/assets/icon/ipv4.png'
  import ipv6 from '@/assets/icon/ipv6.png'
  
  const emit = defineEmits(['getMessage'])
  const props = defineProps({
    id: {
      type: String,
      required: true,
      default: () => {}
    }
  })
  const chartContainer = ref(null)
  // ip信息
  const IpInfo = reactive({
    ip: '',
    port: [], //端口号组
    certificate: [], //ip证书
    html_favicon: []
  })
  const isShow = ref(false)
  const show = () => {
    isShow.value = !isShow.value
  }
  
  const nodes = ref(<any>[])
  const links = ref(<any>[])
  // 初始数据获取
  function getManualMeter() {
    getManualMeterAPI(props.id).then((res: AxiosResponse) => {
      const { code, data } = res.data
      if (code === HttpCodeEnum.SUCCESS) {
        assignObject(IpInfo, data, { nullTextends: [] })
        emit('getMessage', { data, type: 'IP' })
        // 更新节点信息
        infoData(IpInfo)
        // 设置容器
        DrawBox()
      }
    })
  }
  // 更新节点信息
  function infoData(AllData: any) {
    // IP节点
    const { ip, port, certificate, html_favicon } = AllData
    nodes.value.push({ nodeId: ip, node_type: 'IP', icon: china, group: 'Host', leavel: 0 })
    // 创建节点和链接的辅助函数
    function addNodesAndLinks(
      Leader_id: string,
      Leader_type: string,
      ChildData: any,
      leavel: number
    ) {
      if (ChildData && ChildData.length > 0) {
        if (Leader_type === 'PORT') {
          // 组长
          nodes.value.push({
            nodeId: Leader_id+":"+ip,
            node_type: Leader_type,
            group_type: 'port',
            group: 'Leader',
            icon: ipPort,
            sourceip: ip,
            leavel: leavel,
            Child: ChildData
          })
          links.value.push({ source: ip, target: Leader_id+":"+ip })
          // 组员(值)
          ChildData.forEach((item: any, index: any) => {
            nodes.value.push({
              nodeId: item,
              node_type: 'port',
              group_type: 'port',
              group: 'Members',
              icon: ipPort,
              sourceip: ip,
              leavel: leavel + 1,
              expand: false
            })
            links.value.push({ source: Leader_id+":"+ip, target: item })
          })
        }
        if (Leader_type === 'CERTIFICATE') {
          // 组长
          nodes.value.push({
            nodeId: Leader_id+":"+ip,
            node_type: Leader_type,
            group_type: 'certificate',
            group: 'Leader',
            icon: ipCertificate,
            sourceip: ip,
            leavel: leavel,
            Child: ChildData
          })
          links.value.push({ source: ip, target: Leader_id+":"+ip })
          // 组员
          ChildData.forEach((item: any, index: any) => {
            nodes.value.push({
              nodeId: item,
              node_type: 'certificate',
              group_type: 'certificate',
              group: 'Members',
              icon: ipCertificate,
              sourceip: ip,
              leavel: leavel + 1,
              expand: false
            })
            links.value.push({ source: Leader_id+":"+ip, target: item })
          })
        }
        if (Leader_type === 'HTML_FAVICON') {
          // 组长
          nodes.value.push({
            nodeId: Leader_id+":"+ip,
            node_type: Leader_type,
            group_type: 'html_favicon',
            group: 'Leader',
            icon: htmlIcon,
            sourceip: ip,
            leavel: leavel,
            Child: ChildData
          })
          links.value.push({ source: ip, target: Leader_id+":"+ip })
          // 组员
          ChildData.forEach((item: any, index: any) => {
            nodes.value.push({
              nodeId: item,
              node_type: 'html_favicon',
              group_type: 'html_favicon',
              group: 'Members',
              icon: htmlIcon,
              sourceip: ip,
              leavel: leavel + 1,
              expand: false
            })
            links.value.push({ source: Leader_id+":"+ip, target: item })
          })
        }
      }
    }
    // IP端口节点
    addNodesAndLinks('IP开放的端口', 'PORT', port, 1)
    // IP证书节点
    addNodesAndLinks('绑定IP证书', 'CERTIFICATE', certificate, 1)
    // 网页图标节点
    addNodesAndLinks('网页图标', 'HTML_FAVICON', html_favicon, 1)
  }
  
  const svg = ref()
  const simulation = ref()
  const linkGroup = ref()
  const nodeGroup = ref()
  // 设置容器
  function DrawBox() {
    const container = d3.select(chartContainer.value).node() // 获取容器的 DOM 元素
    const containerWidth = container.getBoundingClientRect().width // 获取容器的宽度
    const containerHeight = container.getBoundingClientRect().height // 获取容器的高度
    // 设置容器大小
    svg.value = d3
      .select(chartContainer.value)
      .attr('width', containerWidth)
      .attr('height', containerHeight)
    // 定义环形布局的力
    const ringForce = (alpha) => {
      const k = 1000 * alpha
      return (d) => {
        const r = 25 + d.leavel * 25 // 每个环的半径
        const angle = (d.index / nodes.value.length) * 2 * Math.PI
        d.vx += (r * Math.cos(angle) - d.x) * k
        d.vy += (r * Math.sin(angle) - d.y) * k
      }
    }
    // 设置引导力
    simulation.value = d3
      .forceSimulation(nodes.value)
      .force(
        'link',
        d3
          .forceLink(links.value)
          .id((d: any) => d.nodeId)
          .distance(100)
      )
      .force('charge', d3.forceManyBody().strength(-250))
      .force('center', d3.forceCenter(containerWidth / 2, containerHeight / 2))
      .force('ring', ringForce) // 添加环形布局的力
      .alpha(0.5) // 初始能量
      .alphaTarget(0.01) // 目标能量
    // 定义缩放行为
    const zoom = d3
      .zoom()
      .scaleExtent([0.1, 10]) // 设置缩放范围
      .on('zoom', handleZoom)
    // 应用缩放
    svg.value.call(zoom)
    // 定义默认箭头标记
    const defaultMarker = svg.value
      .append('defs')
      .append('marker')
      .attr('id', 'default-arrow')
      .attr('viewBox', '0 -5 10 10') // 定义标记的视图框
      .attr('refX', 28.2) // 距线终点点
      .attr('refY', 0) // 距线左右
      .attr('markerWidth', 10) // 标记的宽度
      .attr('markerHeight', 10) // 标记的高度
      .attr('orient', 'auto') // 自动调整方向
      .append('path')
      .attr('d', 'M0,-5L10,0L0,5') // 箭头的路径
      .attr('stroke', '#ccc') // 箭头的颜色
      .attr('fill', '#ccc') // 箭头的填充颜色
    // 定义选中状态箭头标记
    const selectMarker = svg.value
      .append('defs')
      .append('marker')
      .attr('id', 'selected-arrow')
      .attr('viewBox', '0 -5 10 10') // 定义标记的视图框
      .attr('refX', 28.2) // 距线终点点
      .attr('refY', 0) // 距线左右
      .attr('markerWidth', 10) // 标记的宽度
      .attr('markerHeight', 10) // 标记的高度
      .attr('orient', 'auto') // 自动调整方向
      .append('path')
      .attr('d', 'M0,-5L10,0L0,5') // 箭头的路径
      .attr('stroke', 'black') // 箭头的颜色
      .attr('fill', 'black') // 箭头的填充颜色
    // 创建链接组和节点组
    linkGroup.value = svg.value.append('g').attr('class', 'links')
    nodeGroup.value = svg.value.append('g').attr('class', 'nodes')
    // 绘制
    drawEle()
  }
  // 缩放处理函数
  function handleZoom(event: any) {
    // 获取当前缩放的变换信息
    const transform = event.transform
    // 更新链接和节点的位置
    linkGroup.value.attr('transform', transform)
    nodeGroup.value.attr('transform', transform)
  }
  // 绘制
  function drawEle() {
    // 清除旧的元素
    svg.value.selectAll('line, circle, image, text').remove()
    // 创建链接元素
    const linkElements = linkGroup.value
      .selectAll('line')
      .data(links.value, (d: any) => `${d.source.nodeId}-${d.target.nodeId}`) // 使用键值来识别链接
      .enter()
      .append('line')
      .style('stroke', '#ccc')
      .style('stroke-width', 1)
      // .attr("stroke-dasharray", "5,5")  // 设置虚线样式
      .attr('marker-end', 'url(#default-arrow)') // 应用箭头标记
  
    // 创建颜色组
    const color = d3.scaleOrdinal(d3.schemeCategory10)
    // 创建节点元素
    const nodeElements = nodeGroup.value
      .selectAll('circle')
      .data(nodes.value)
      .enter()
      .append('g') // 使用 'g' 元素来包含圆圈和文本
      .style('fill', (d: any, i: number) => color(i)) // 设置颜色
      .on('click', (event: any, d: any) => {
        // SelectNode(d);
        NodeClick(d)
      })
  
    // 需要根据group属性判断的部分
    nodeElements.each(function (d: any) {
      const selection = d3.select(this)
      if (d.group === 'Host') {
        selection
          .append('circle')
          .attr('class', 'Outer-circle')
          .attr('r', 25)
          .attr('fill', 'red')
          .attr('opacity', 0.5)
        selection
          .append('circle')
          .attr('class', 'Inner-host-circle')
          .attr('r', 20)
          .attr('stroke', '#5b5b5b')
          .attr('stroke-width', 1)
          .attr('fill', '#fff')
        selection
          .append('text')
          .attr('dx', '-2.5rem')
          .attr('dy', 40)
          .text((d: any) => d.nodeId)
        selection
          .append('image')
          .attr('xlink:href', (d: any) => (d.icon ? d.icon : nullBox))
          .attr('width', 35)
          .attr('height', 35)
          .attr('x', -17.5)
          .attr('y', -17.5)
          .call(d3.drag().on('start', dragstarted).on('drag', dragged).on('end', dragended))
      }
      if (d.group === 'Leader') {
        selection
          .append('circle')
          .attr('class', 'Inner-leader-circle')
          .attr('r', 18)
          .attr('stroke', '#5b5b5b')
          .attr('stroke-width', 1)
          .attr('fill', '#fff')
        selection
          .append('text')
          .attr('dx', '-2.5rem')
          .attr('dy', 40)
          .text((d: any) => d.nodeId)
        selection
          .append('image')
          .attr('xlink:href', (d: any) => (d.icon ? d.icon : nullBox))
          .attr('width', 25)
          .attr('height', 25)
          .attr('x', -12.5)
          .attr('y', -12.5)
          .call(d3.drag().on('start', dragstarted).on('drag', dragged).on('end', dragended))
      }
      if (d.group === 'Members') {
        selection
          .append('circle')
          .attr('class', 'Inner-members-circle')
          .attr('r', 18)
          .attr('fill', '#fff')
        selection
          .append('image')
          .attr('xlink:href', (d: any) => (d.icon ? d.icon : nullBox))
          .attr('width', 25)
          .attr('height', 25)
          .attr('x', -12.5)
          .attr('y', -12.5)
          .call(d3.drag().on('start', dragstarted).on('drag', dragged).on('end', dragended))
      }
    })
  
    simulation.value.on('tick', () => {
      linkElements
        .attr('x1', (d: any) => d.source.x)
        .attr('y1', (d: any) => d.source.y)
        .attr('x2', (d: any) => d.target.x)
        .attr('y2', (d: any) => d.target.y)
      nodeElements.attr('transform', (d: any) => `translate(${d.x},${d.y})`)
    })
    // 拖拽事件
    function dragstarted(event: any, d: any) {
      if (!event.active) simulation.value.alphaTarget(0)
      d.fx = d.x
      d.fy = d.y
    }
  
    function dragged(event: any, d: any) {
      d.fx = event.x
      d.fy = event.y
    }
  
    function dragended(event: any, d: any) {
      if (!event.active) simulation.value.alphaTarget(0.3).restart()
      d.fx = null
      d.fy = null
    }
  }
  // 选中节点
  const SelectNode = (node: any) => {
    // 找到与当前节点相关的链接
    const relatedLinks = links.value.filter(
      (link) => link.source.nodeId === node.nodeId || link.target.nodeId === node.nodeId
    )
    // 找到与当前节点相关的邻接点
    const relatedNodes = nodes.value.filter((n) =>
      relatedLinks.some((l) => l.source.nodeId === n.nodeId || l.target.nodeId === n.nodeId)
    )
    // 重置所有|节点\链接\箭头|的样式
    svg.value.selectAll('line').style('stroke', '#ccc').attr('marker-end', 'url(#default-arrow)') // 使用默认箭头标记
    svg.value.selectAll('circle').style('stroke', '#5b5b5b')
    // 设置当前节点样式
    svg.value
      .selectAll('circle')
      .filter((d) => d.nodeId === node.nodeId)
      .style('stroke', 'black')
    // 设置邻接点样式
    svg.value
      .selectAll('circle')
      .filter((d) => relatedNodes.includes(d))
      .style('stroke', 'black')
    // 设置邻接线样式
    svg.value
      .selectAll('line')
      .filter((d) => relatedLinks.includes(d))
      .style('stroke', 'black')
      .attr('marker-end', 'url(#selected-arrow)') // 使用选中箭头标记
  }
  // 节点点击事件
  const NodeClick = (node: any) => {
    console.log(node)
    const { node_type } = node
    const SonFlag = /^[A-Z_]+$/.test(node_type)
    // 节点组组长
    if (SonFlag) {
      emit('getMessage', { data: node, type: node_type })
      if (['PORT', 'CERTIFICATE', 'HTML_FAVICON'].includes(node_type)) {
        const { nodeId, node_type, group_type, sourceip, Child, leavel } = node
        if (node_type === 'PORT') {
          // 组员(值)
          Child.forEach((item: any, index: any) => {
            // 检查 nodes.value 中是否已存在该节点
            const existingNode = nodes.value.find((node: any) => node.nodeId === item)
            // 若不存在，则添加新节点
            if (!existingNode) {
              nodes.value.push({
                nodeId: item,
                node_type: 'port',
                group_type,
                group: 'Members',
                icon: ipPort,
                sourceip: nodeId,
                OriginalSource: sourceip,
                leavel: leavel + 1,
                expand: false
              })
              links.value.push({ source: nodeId, target: item })
            } else {
              links.value.push({ source: nodeId, target: existingNode.nodeId })
            }
          })
        }
        if (node_type === 'CERTIFICATE') {
          // 组员(值)
          Child.forEach((item: any, index: any) => {
            // 检查 nodes.value 中是否已存在该节点
            const existingNode = nodes.value.find((node: any) => node.nodeId === item)
            // 若不存在，则添加新节点
            if (!existingNode) {
              nodes.value.push({
                nodeId: item,
                node_type: 'certificate',
                group_type,
                group: 'Members',
                icon: ipPort,
                sourceip: nodeId,
                OriginalSource: sourceip,
                leavel: leavel + 1,
                expand: false
              })
              links.value.push({ source: nodeId, target: item })
            } else {
              links.value.push({ source: nodeId, target: existingNode.nodeId })
            }
          })
        }
        if (node_type === 'HTML_FAVICON') {
          // 组员(值)
          Child.forEach((item: any, index: any) => {
            // 检查 nodes.value 中是否已存在该节点
            const existingNode = nodes.value.find((node: any) => node.nodeId === item)
            // 若不存在，则添加新节点
            if (!existingNode) {
              nodes.value.push({
                nodeId: item,
                node_type: 'html_favicon',
                group_type,
                group: 'Members',
                icon: ipPort,
                sourceip: nodeId,
                OriginalSource: sourceip,
                leavel: leavel + 1,
                expand: false
              })
              links.value.push({ source: nodeId, target: item })
            } else {
              links.value.push({ source: nodeId, target: existingNode.nodeId })
            }
          })
        }
        // 重新启动力导向图的模拟
        if (simulation.value) {
          simulation.value.nodes(nodes.value)
          simulation.value.force(
            'link',
            d3
              .forceLink(links.value)
              .id((d: any) => d.nodeId)
              .distance(100)
          )
          simulation.value.alpha(0.3).restart()
        }
        node.expand = true
        // 重新绘制元素
        drawEle()
      }
    }
    // 组员序列
    else {
      if (['port', 'certificate', 'html_favicon'].includes(node_type)) {
        const { sourceip, nodeId } = node
        // 展开请求
        getManualCountAPI({ ip: sourceip, type: node_type, value: nodeId }).then(
          (res: AxiosResponse) => {
            const { code, data } = res.data
            if (code === HttpCodeEnum.SUCCESS) {
              const { domainCount, ipv4Count, ipv6Count } = data //域名,ip4,ip6
              addNode(data, node)
              emit('getMessage', {
                data: { ...data, value: node.nodeId, icon: node.icon },
                type: node_type
              })
            }
          }
        )
      }
      if (['domain', 'ipv4', 'ipv6'].includes(node_type)) {
        const pageSize = 5
        const pageNum = 5
        const { sourceip, nodeId, expand, group_type, _value } = node
        if (!expand) {
          // 获取下级节点
          getManualMeterTwoAPI({
            pageSize,
            pageNum,
            ip: sourceip,
            type: group_type,
            value: _value
          }).then((res: AxiosResponse) => {
            const { code, data } = res.data
            if (code === HttpCodeEnum.SUCCESS) {
              node.expand = true
              if (data.length > 0) {
                relationNode(data, node)
              }
            }
          })
        }
      }
      if (['ip'].includes(node_type) && node.expand === false) {
        getManualMeterAPI(node.id).then((res: AxiosResponse) => {
          const { code, data } = res.data
          if (code === HttpCodeEnum.SUCCESS) {
            // 更新节点信息
            addNode(data, node, 1)
          }
        })
      }
    }
  }
  // 4级点添加组长['domain', 'ipv4', 'ipv6']
  const addNode = (data: any, sourcenode: any, defaultNumber = 0) => {
    if (defaultNumber != 1) {
      const { domainCount, ipv4Count, ipv6Count } = data //域名,ip4,ip6
      if (sourcenode.node_type != 'html_favicon') {
        sourcenode.group = 'Leader'
      }
      if (!sourcenode.expand) {
        const { nodeId, node_type, group_type, sourceip, leavel } = sourcenode
        if (domainCount > 0) {
        }
        if (ipv4Count > 0) {
          const newNodeId = 'IPV4:' + ipv4Count
          // 组长
          nodes.value.push({
            nodeId: newNodeId,
            node_type: 'ipv4',
            group_type,
            group: 'Leader',
            sourceip,
            icon: ipv4,
            ipv4Count,
            leavel: leavel + 1,
            _value: sourcenode.nodeId,
            expand: false
          })
          links.value.push({ source: sourcenode.nodeId, target: newNodeId })
        }
        if (ipv6Count > 0) {
        }
      }
      // 重新启动力导向图的模拟
      if (simulation.value) {
        simulation.value.nodes(nodes.value)
        simulation.value.force(
          'link',
          d3
            .forceLink(links.value)
            .id((d: any) => d.nodeId)
            .distance(100)
        )
        simulation.value.alpha(0.3).restart()
      }
      sourcenode.expand = true
      // 重新绘制元素
      drawEle()
    } else {
      const { ip, port, certificate, html_favicon } = data
      const { nodeId, node_type, group_type, sourceip, leavel } = sourcenode
      // 创建节点和链接的辅助函数
      function addNodesAndLinks(Leader_id = '', Leader_type = '', ChildData: any) {
        if (ChildData && ChildData.length > 0) {
          if (Leader_type === 'PORT') {
            // 组长
            nodes.value.push({
              nodeId: Leader_id+":"+ip,
              node_type: Leader_type,
              group_type,
              group: 'Leader',
              icon: ipPort,
              sourceip,
              leavel: leavel + 1,
              Child: ChildData
            })
            links.value.push({ source: nodeId, target: Leader_id+":"+ip })
          }
          if (Leader_type === 'CERTIFICATE') {
            // 组长
            nodes.value.push({
              nodeId: Leader_id+":"+ip,
              node_type: Leader_type,
              group_type,
              group: 'Leader',
              icon: ipCertificate,
              sourceip,
              leavel: leavel + 1,
              Child: ChildData
            })
            links.value.push({ source: nodeId, target: Leader_id+":"+ip })
          }
          if (Leader_type === 'HTML_FAVICON') {
            // 组长
            nodes.value.push({
              nodeId: Leader_id+":"+ip,
              node_type: Leader_type,
              group_type,
              group: 'Leader',
              icon: htmlIcon,
              sourceip,
              leavel: leavel + 1,
              Child: ChildData
            })
            links.value.push({ source: nodeId, target: Leader_id+":"+ip })
          }
        }
      }
      // IP端口节点
      addNodesAndLinks('IP开放的端口', 'PORT', port)
      // IP证书节点
      addNodesAndLinks('绑定IP证书', 'CERTIFICATE', certificate)
      // 网页图标节点
      addNodesAndLinks('网页图标', 'HTML_FAVICON', html_favicon)
      // 重新启动力导向图的模拟
      if (simulation.value) {
        simulation.value.nodes(nodes.value)
        simulation.value.force(
          'link',
          d3
            .forceLink(links.value)
            .id((d: any) => d.nodeId)
            .distance(100)
        )
        simulation.value.alpha(0.3).restart()
      }
      sourcenode.expand = true
      // 重新绘制元素
      drawEle()
    }
  }
  // 点击节点绘制'domain', 'ipv4', 'ipv6'
  const relationNode = (_nodes = [], sourcenode: any) => {
    const { nodeId, node_type, group_type, sourceip, expand, leavel } = sourcenode
    if (node_type === 'domain') {
    }
    if (node_type === 'ipv4') {
      _nodes.forEach((item: any, index: any) => {
        // 检查 nodes.value 中是否已存在该节点
        const existingNode = nodes.value.find((node: any) => node.nodeId === item.ip)
        // 若不存在，则添加新节点
        if (!existingNode) {
          // 添加新节点
          nodes.value.push({
            nodeId: item.ip,
            ...item,
            node_type: 'ip',
            group_type,
            sourceip,
            icon: Ip,
            group: 'Leader',
            leavel: leavel + 1,
            expand: false
          })
          // 添加新链接
          links.value.push({ source: nodeId, target: item.ip })
        } else {
          // 添加新链接
          links.value.push({ source: nodeId, target: item.ip })
        }
      })
    }
    if (node_type === 'ipv6') {
    }
    // 重新启动力导向图的模拟
    if (simulation.value) {
      simulation.value.nodes(nodes.value)
      simulation.value.force(
        'link',
        d3
          .forceLink(links.value)
          .id((d: any) => d.nodeId)
          .distance(100)
      )
      simulation.value.alpha(0.3).restart()
    }
    // 重新绘制元素
    drawEle()
  }
  onMounted(() => {
    getManualMeter()
  })
  </script>
  
  <style lang="scss" scoped>
  .content {
    width: 100%;
    height: 880px;
    position: relative;
  
    .left {
      float: left;
  
      img {
        margin-left: 0.725rem;
  
        &:hover {
          background-color: #ccc;
          /* 鼠标移入时的背景颜色 */
        }
      }
    }
  
    .right {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1;
  
      img {
        margin-right: 0.725rem;
  
        &:hover {
          background-color: #ccc;
          /* 鼠标移入时的背景颜色 */
        }
      }
  
      .myForm {
        width: 200px;
        float: right;
      }
    }
  }
  </style>
  